<script lang="ts" setup>
// 导入系统用户 API 类型定义
import type { ModianVisitorLogApi } from '#/api/moxi/modianvisitorlog';

// 从 Vue 导入计算属性和响应式引用相关函数
import { ref } from 'vue';

import { Page } from '@vben/common-ui';
// 导入自定义抽屉组件钩子函数
import { useVbenDrawer } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import {
  Card,
  Descriptions,
  DescriptionsItem,
  Timeline,
  TimelineItem,
} from 'ant-design-vue';
// 导入消息提示组件
import Dayjs from 'dayjs';

import { getModianVisitorLog } from '#/api/moxi/modianvisitorlog';
// import descriptions from './descriptions.vue';
// 导入自定义表单组件钩子函数
// import { useVbenForm } from '#/adapter/form';
// 导入系统用户相关的 API 方法
// import { createUser, getUser, updateUser } from '#/api/system/user';
// 导入国际化函数
import { $t } from '#/locales';

// 定义自定义事件，用于通知父组件操作成功
const emit = defineEmits(['success']);
// 定义响应式引用，用于存储表单数据
const formData = ref<ModianVisitorLogApi.ModianVisitorLog>();
const valObj = ref<any>();

// 计算属性，根据是否有表单数据的 id 来动态生成标题
// const getTitle = computed(() => {
//     console.log(12134);
//     console.log(formData.value);
//     return formData.value?.id
//         ? $t('ui.actionTitle.edit', ['用户']) // 有 id 表示编辑操作
//         : $t('ui.actionTitle.create', ['用户']); // 没有 id 表示创建操作
// });

// 使用自定义抽屉钩子函数创建抽屉组件和抽屉 API
const [Drawer, DrawerApi] = useVbenDrawer({
  // 抽屉确认事件处理函数
  async onConfirm() {
    console.log('点击');
    // // 对表单进行验证
    // const { valid } = await getModianVisitorLog.validate();
    // // 若验证不通过，直接返回
    // if (!valid) {
    //     return;
    // }
    // // 锁定抽屉，防止用户重复操作
    // DrawerApi.lock();
    // // 获取表单数据
    // const data = (await getModianVisitorLog.getValues()) as ModianVisitorLogApi.ModianVisitorLog;
    // try {
    //     // 根据是否有 id 决定是更新用户还是创建用户
    //     await (formData.value?.id ? updateUser(data) : createUser(data));
    //     // 关闭抽屉
    //     await DrawerApi.close();
    //     // 触发自定义事件通知父组件操作成功
    //     emit('success');
    //     // 显示操作成功的消息提示
    //     message.success($t('ui.actionMessage.operationSuccess'));
    // } finally {
    //     // 解锁抽屉
    //     DrawerApi.unlock();
    // }
  },
  // 抽屉打开状态变化事件处理函数
  async onOpenChange(isOpen: boolean) {
    console.log('打开');
    // 若抽屉关闭，清空表单数据
    if (!isOpen) {
      formData.value = undefined;
      return;
    }
    // 获取抽屉传递的数据
    const data = DrawerApi.getData<ModianVisitorLogApi.ModianVisitorLog>();
    console.log(data);
    // 若没有数据或没有 id，直接返回
    if (!data || !data.id) {
      return;
    }
    // 锁定抽屉，防止用户重复操作
    DrawerApi.lock();
    try {
      // 根据 id 获取用户详情数据
      const res = await getModianVisitorLog(data.id as number);
      valObj.value = res;
    } finally {
      // 解锁抽屉
      DrawerApi.unlock();
    }
  },
});
</script>

<template>
  <!-- 渲染抽屉组件，设置标题和宽度 -->
  <!--  :footer="false" 取消按钮 -->
  <Drawer :title="$t('ui.visitor.reservation')" class="w-1/2" :footer="false">
    <!-- 渲染表单组件，设置左右外边距 -->
    <Page>
      <div class="mt-4 flex flex-col gap-4 md:flex-row">
        <!-- 左侧：建立连接、发送消息 -->
        <Card :bordered="false" class="md:w-2/2 w-full">
          <!-- <template #title>
                        <div class="flex items-center">
                            <span class="ml-2 text-lg font-medium">部门信息</span>
                        </div>
                    </template> -->
          <div class="mb-2 flex items-center rounded-lg p-3">
            <div>
              <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
            </div>
            <span class="mr-2 text-xl font-medium">被访人姓名</span>
          </div>
          <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
            <DescriptionsItem label="被访人姓名">
              {{ valObj?.respondent.name }}
            </DescriptionsItem>
            <DescriptionsItem label="头像">
              <a-avatar size="large" :src="valObj?.respondent.avatar" />
            </DescriptionsItem>
            <DescriptionsItem label="部门">
              {{ valObj?.respondent.deptNames.split(',').pop()?.trim() || '' }}
            </DescriptionsItem>
            <DescriptionsItem label="职位">
              {{ valObj?.respondent.title }}
            </DescriptionsItem>
            <DescriptionsItem label="办公地点">
              {{ valObj?.respondent.workPlace }}
            </DescriptionsItem>
          </Descriptions>

          <div class="mb-2 flex items-center rounded-lg p-3">
            <div>
              <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
            </div>
            <span class="mr-4 text-xl font-medium">访客预约信息</span>
          </div>

          <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
            <DescriptionsItem label="姓名">
              {{ valObj?.visitorName }}
            </DescriptionsItem>
            <DescriptionsItem label="联系方式">
              {{ valObj?.visitorMobile }}
            </DescriptionsItem>
            <DescriptionsItem label="身份证">
              {{ valObj?.visitorIdcard }}
            </DescriptionsItem>
            <DescriptionsItem label="所属单位">
              {{ valObj?.visitorCompany }}
            </DescriptionsItem>
            <DescriptionsItem label="预约时间">
              <template v-if="valObj?.startTime && valObj.startTime !== 0">
                {{ Dayjs(valObj.startTime).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
            </DescriptionsItem>
            <DescriptionsItem label="时长">
              {{ valObj?.visitorCompany }}
            </DescriptionsItem>
            <DescriptionsItem label="访客事由">
              {{ valObj?.visitCause }}
            </DescriptionsItem>
          </Descriptions>

          <div class="mb-2 flex items-center rounded-lg p-3">
            <div>
              <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
            </div>
            <span class="mr-4 text-xl font-medium">审批详情:</span>
          </div>

          <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
            <DescriptionsItem label="审批状态" :span="2">
              {{
                valObj?.respondent?.approvalStatus == 0
                  ? '审批中'
                  : valObj?.aprespondentprs?.approvalStatus == 1
                    ? '通过'
                    : valObj?.respondent?.approvalStatus == 2
                      ? '驳回'
                      : ''
              }}
            </DescriptionsItem>
            <!-- <DescriptionsItem label="当前审批人">{{ valObj?.apprs?.apprName }}</DescriptionsItem> -->
            <!-- <DescriptionsItem label="审核流程" :span="2">
                            <Steps :current="2" size="small" :items="[
                                {
                                    title: '张三三',
                                    description: '部门总监',
                                }
                            ]"></Steps>
                        </DescriptionsItem> -->
            <DescriptionsItem label="记录" :span="2">
              <!-- {{ valObj?.apprs }} -->
              <Timeline v-if="valObj?.apprs && valObj?.apprs.length > 0">
                <TimelineItem v-for="item in valObj?.apprs" :key="item.id">
                  {{ Dayjs(item?.apprTime).format('YYYY-MM-DD HH:mm:ss') }}
                  审核人：{{ item?.apprName }} 审批意见：{{
                    item?.apprStatus == 0
                      ? '审批中'
                      : item?.apprStatus == 1
                        ? '通过'
                        : item?.apprStatus == 2
                          ? '驳回'
                          : '无'
                  }}
                </TimelineItem>
              </Timeline>
            </DescriptionsItem>
            <!-- <DescriptionsItem label="抄送人">张三</DescriptionsItem> -->
          </Descriptions>
        </Card>
      </div>
    </Page>
  </Drawer>
</template>
